﻿@{
    ViewBag.Title = "Danh sách người dùng";
}
<h2>
    Danh sách người dùng</h2>
@*<p>
    <a href="#" class="createLink">Create New</a>
</p>*@
<div id="tableList">
    @Html.Partial("ListUser")
</div>
<div id="main-popUp">
</div>
<div id="popup">
    <span class="button bClose"><span>X</span> </span>
    <div class="container">
    </div>
</div>
<link href="@Url.Content("../../../../Content/bPopup.css")" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="@Url.Content("../../../../Scripts/jquery.bpopup-0.7.0.min.js")"></script>
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    function Initial() {

        $('.edit-class').bind('click', function (e) {
            e.preventDefault();
            var id = $(this).attr("id");
            $('#popup').bPopup({
                onOpen: function () {
                    $("#main-popUp").bPopup(
                                {
                                    content: 'iframe', //'iframe' or 'ajax'
                                    contentContainer: '.container'
                                    //                            loadUrl: 'http://localhost:4647/MotorBike/Edit?plate=' + plate IFrame
                                }, function () {
                                    $('iframe').css('height', '300px');
                                    $.ajax({
                                        url: '@Url.Action("Edit", "User")',
                                        data: { "id": id },
                                        method: "GET",
                                        success: function (data) {
                                            $('.container').html(data);
                                        }
                                    });
                                });
                }
            });
        });
        $('.detail-class').bind('click', function (e) {
            e.preventDefault();
            var id = $(this).attr("id");
            $('#popup').bPopup({
                onOpen: function () {
                    $('#main-popUp').bPopup(
                        {
                            content: 'iframe',
                            contentContainer: '.container',
                            loadUrl: 'http://localhost:4647/User/Details/' + id
                        }, function () {
                            $('iframe').css('height', '300px');
                        });
                }
            });
        });
        $('#Create').bind('click', function (e) {
            e.preventDefault();
            $('#popup').bPopup({
                onOpen: function () {
                    $("#main-popUp").bPopup(
                        {
                            content: 'iframe',
                            contentContainer: '.container'
                            //                            loadUrl: 'http://localhost:4647/MotorBike/Create -> create Iframe
                        }, function () {
                            $('iframe').css('height', '300px');
                            $.ajax({
                                url: '@Url.Action("Create", "User")',
                                method: "GET",
                                success: function (data) {
                                    $('.container').html(data);
                                }
                            });
                        });
                }
            });
        });
        $('.delete-class').bind('click', function (e) {
            e.preventDefault();
            if (confirm("Bạn có chắc chắn muốn xóa?")) {
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("Delete", "User")',
                    data: { "id": $(this).attr("id") },
                    dataType: "html",
                    success: function (data) {
                        $('#tableList').html(data);
                    }
                });
            }
            ;
        });

    }
    $(function () {
        Initial();
        //        $(document).ajaxSuccess(function () { Initial(); });
    });
</script>